<template>
  <div id="main-bussType" style="width:100%;height:100%;pointer-events:all"></div>
</template>
<script>
export default {
  data() {
    return {
      dataList: []
    };
  },
  mounted() {
    this.getData();
  },
  created() {},
  methods: {
    // 获取数据
    getData() {
      this.$get('/foodsafety/getBusiness').then(res => {
        this.dataList = res.data
        this.renderEcharts(res.data)
      })
    },
    // 图表自动轮播高亮显示函数 myChart直接用
    pieActive() {
      let myChart = this.$echarts.init(document.getElementById("main-bussType"));
      let currentIndex = -1
      const length = this.dataList.length
      
      const animation = (delay = 3000) => {
        setInterval(() => {
          // 清除之前的高亮
          myChart.dispatchAction({
            type: 'downplay',
            seriesIndex: 0,
            dataIndex: currentIndex
          })
          currentIndex = (currentIndex + 1) % length
          // 高亮当前图形
          myChart.dispatchAction({
            type: 'highlight',
            seriesIndex: 0,
            dataIndex: currentIndex,
          })
          // 显示 tooltip
          myChart.dispatchAction({
            type: 'showTip',
            seriesIndex: 0,
            dataIndex: currentIndex,
          })
        }, delay)
      }
      animation(4000)
      // 鼠标划入
      myChart.on('mouseover',()=>{
        // 停止定时器，清除之前的高亮
        clearInterval(animation)
        myChart.dispatchAction({
          type: 'downplay',
          seriesIndex: 0,
          dataIndex: currentIndex
        })
      })
    },
    // 渲染饼图
    renderEcharts(data) {
      let myChart = this.$echarts.init(document.getElementById("main-bussType"));
      var option
      option = {
        tooltip: {
          trigger: "item",
          backgroundColor: "#404C73",
          borderColor: "#404C73",
          textStyle: {
            color: '#FFF', // 文字的颜色
          }
        },
        legend: {
          show: false,
          top: "center",
          left: "left",
          orient: 'vertical',
          textStyle: {color: '#fff'}
        },
        series: [
          {
            name: "主体业态",
            type: "pie",
            center: ["50%", "50%"],
            radius: ["40%", "70%"],
            avoidLabelOverlap: false,
            itemStyle: {
              borderRadius: 5,
              borderWidth: 2,
            },
            label: {
              show: false,
              position: "center",
              formatter: '{@镇街级}',
              color: '#fff'
            },
            emphasis: { // 设置高亮时显示标签
              label: {
                show: true,
                fontSize: "40",
                fontWeight: "bold",
              },
              scale: true, // 设置高亮时放大图形
              scaleSize: 15
            },
            labelLine: {
              show: false,
            },
            data: data.map(item => {
              return {
                value: item.num,
                name: item.business
              }
            })
          },
        ],
      };

      option && myChart.setOption(option);

      // 鼠标划出
      this.pieActive()
      myChart.on('mouseout',()=>{
        this.pieActive()
      })
    }
  },
};
</script>
